<template>
  <div class="app-container">
    <el-row style="display: flex;">
      <el-card class="box-card" style="min-width:320px;width:320px;">
        <div slot="header" class="clearfix">
          <span>{{ $t('个人信息') }}</span>
        </div>
        <div>
          <div class="text-center profile">
            <UploadAvatar :logo-info="user.avatar" @appendData="uploadImg($event)" />
          </div>
          <ul class="list-group list-group-striped user-group" style="margin-top: 20px;">
            <li class="list-group-item">
              <div class="pull-left">
                <svg-icon icon-class="user" />{{ $t('用户名称') }}
              </div>
              <div class="pull-right">{{ user.nickName }}</div>
            </li>
            <li class="list-group-item">
              <div class="pull-left">
                <svg-icon icon-class="phone" />{{ $t('号码') }}
              </div>
              <div class="pull-right">{{ user.phonenumber }}</div>
            </li>
            <li class="list-group-item">
              <div class="pull-left">
                <svg-icon icon-class="email" />{{ $t('用户邮箱') }}
              </div>
              <div class="pull-right">{{ user.email }}</div>
            </li>
            <li class="list-group-item">
              <div class="pull-left">
                <svg-icon icon-class="tree" />{{ $t('所属部门') }}
              </div>
              <div v-if="user.dept" class="pull-right">{{ $t(user.dept.deptName) }}</div>
            </li>
            <li class="list-group-item">
              <div class="pull-left">
                <svg-icon icon-class="peoples" />{{ $t('所属角色') }}
              </div>
              <div class="pull-right">{{ $t(roleGroup) }}</div>
            </li>
            <li class="list-group-item">
              <div class="pull-left">
                <svg-icon icon-class="password" />{{ $t('ApiToken') }}
              </div>
              <div class="pull-right" :style="user.apiToken ? '' : 'color: #1890ff;'" style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" @click="createToken(user.apiToken)">
                {{ !user.apiToken ? $t('生成') : user.apiToken }}
              </div>
            </li>
          </ul>
        </div>
      </el-card>
      <!--      <el-card style="width: 100%;margin-left: 10px;">-->
      <!--        <div slot="header" class="clearfix">-->
      <!--          <span>{{ $t('基本资料') }}</span>-->
      <!--        </div>-->
      <!--        <userInfo :user="user" />-->
      <!--      </el-card>-->
      <el-card style="width: 30%;margin-left: 10px;">
        <div slot="header" class="clearfix">
          <span>{{ $t('修改密码') }}</span>
        </div>
        <resetPwd :user="user" />
      </el-card>
    </el-row>
  </div>
</template>

<script>
import resetPwd from './resetPwd'
// import userInfo from './userInfo'
import { createApiToken, getUserProfile } from '@/api/system/user'
import { uploadLogo } from '@/api/system/user'
import UploadAvatar from '@/components/Avatar/uploadAvatar'
export default {
  name: 'Profile',
  // components: { UploadAvatar, userInfo, resetPwd },
  components: { UploadAvatar, resetPwd },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: 'userinfo'
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.datas.roleGroup
        this.postGroup = response.datas.postGroup
      })
    },
    // 上传图片
    uploadImg(data) {
      const formData = new FormData()
      formData.append('avatarfile', data)
      formData.append('id', this.user.id)
      uploadLogo(formData).then(response => {
        if (response.code === 200) {
          this.open = false
          this.user.avatar = response.datas.imgUrl
          this.msgSuccess(this.$t('上传成功'))
        } else {
          this.msgError(response.msg)
        }
      })
    },
    createToken(token) {
      var flag = !!token
      if (flag) {
        // 复制
        this.$copyText(token).then(() => {
          this.msgSuccess(this.$t('复制成功'))
        })
      } else {
        // 生成
        createApiToken().then(res => {
          this.user.apiToken = res.msg
        })
      }
    }
  }
}
</script>
